import React, { useEffect, useState } from "react";
import { Button, List, Tabs } from "antd";
import intl from 'react-intl-universal';
import $ from 'jquery';
import axios from "axios";
import UserRoleChart from "./userRoleChart";
import ArticleClassificationChart from "./articleClassificationChart";
import './homeData.css';
import glodMedal from '../../../images/goldMedal.png';
import silverMedal from '../../../images/silverMedal.png';
import bronzeMedal from '../../../images/bronzeMedal.png';

const { TabPane } = Tabs;

const HomeData = () => {
    // 获取用户积分榜数据
    const [data1, setData1] = useState([]);
    useEffect(() => {
        const getData = () => {
            $.ajax({
                url: '/home/main/userRank',
                type: 'post',
                dataType: 'json',
                success: function(result) {
                    // console.log(result.data);
                    let arr = [];
                    result.data.map((item, index) => {
                        if (index === 0) {
                            arr.push({
                                name: Object.keys(item)[0],
                                points: Object.values(item)[0],
                                num: index + 1,
                            });
                        } else {
                            arr.push({
                                name: Object.keys(item)[0],
                                points: Object.values(item)[0],
                                num: 
                                    Object.values(item)[0] === arr[arr.length - 1].points ? arr[arr.length - 1].num : arr[arr.length - 1].num + 1
                                ,
                            });
                        }
                    });
                    // console.log(arr);
                    setData1(arr);
                },
                error: function(err) {

                },
            });
        }
        getData();
    }, []);


    // 获取文章浏览量排行榜数据
    const [data2, setData2] = useState([]);
    useEffect(() => {
        const getData = () => {
            $.ajax({
                url: '/home/main/articleRank',
                type: 'post',
                dataType: 'json',
                success: function(result) {
                    // console.log(result.data);
                    let arr = [];
                    result.data.map((item, index) => {
                        if (index === 0) {
                            arr.push({
                                title: Object.keys(item)[0],
                                views: Object.values(item)[0],
                                num: index + 1,
                            });
                        } else {
                            arr.push({
                                title: Object.keys(item)[0],
                                views: Object.values(item)[0],
                                num: 
                                    Object.values(item)[0] === arr[arr.length - 1].views ? arr[arr.length - 1].num : arr[arr.length - 1].num + 1
                                ,
                            });
                        }
                    });
                    // console.log(arr);
                    setData2(arr);
                },
                error: function(err) {

                },
            });
        }
        getData();
    }, []);


    return(
        <div>
            <Button />
            <table style={{ width: '100%', height: 'fit-content' }}>
                <tbody>
                    <tr>
                        <td style={{ width: 'fit-content', height: 'fit-content' }}>
                            <div>
                                <UserRoleChart />
                            </div>
                        </td>
                        <td rowSpan={'2'} style={{height:'fit-content'}}>
                            <Tabs defaultActiveKey="1" className="rankingList" centered='true'>
                                <TabPane tab={intl.get('rankingUser')} key='1'>
                                    <List className="rankList"
                                        bordered
                                        dataSource={data1}
                                        renderItem={(item) => (
                                            <List.Item className="rankListItem">
                                                {
                                                    item.num <= 3 ? 
                                                    item.num === 1 ? 
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}><img src={glodMedal} style={{width:'28px'}} /> {item.name}</div> :
                                                    item.num === 2 ? 
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}><img src={silverMedal} style={{width:'28px'}} /> {item.name}</div> : 
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}><img src={bronzeMedal} style={{width:'28px'}} /> {item.name}</div> 
                                                    :
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{item.name}</div>
                                                }
                                                {item.points}
                                            </List.Item>
                                        )}
                                    />
                                </TabPane>
                                <TabPane tab={intl.get('rankingArticle')} key='2'>
                                    <List className="rankList"  style={{height:'fit-content'}}
                                        bordered
                                        dataSource={data2}
                                        renderItem={(item) => (
                                            <List.Item className="rankListItem">
                                                {
                                                    item.num <= 3 ? 
                                                    item.num === 1 ? 
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}><img src={glodMedal} style={{width:'28px'}} /> {item.title}</div> :
                                                    item.num === 2 ? 
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}><img src={silverMedal} style={{width:'28px'}} /> {item.title}</div> : 
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}><img src={bronzeMedal} style={{width:'28px'}} /> {item.title}</div> 
                                                    :
                                                    <div style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{item.title}</div>
                                                }
                                                {item.views}
                                            </List.Item>
                                        )}
                                    />
                                </TabPane>
                            </Tabs>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style={{ marginTop: '20px' }}>
                                <ArticleClassificationChart />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}

export default HomeData;